import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import {Alert, Button, Divider, Empty, message, Modal, Spin, Tag} from 'antd';
import {
  resOrdersConfirm,
  resOrdersExpress,
  resOrdersPost,
} from '@/services/orders';
import { useRequest } from 'ahooks';

const ExpressInfo: FC<
  PropsWithChildren<{ source: API.OrdersDetailResult }>
> = ({ source }) => {
  const { data, loading } = useRequest(resOrdersExpress, {
    defaultParams: [source.id],
  });

  return (
    <div className={'border-b px-8'}>
      <h2 className={'font-bold text-xl px-2 pb-2 text-center '}>物流信息</h2>
      <Spin spinning={loading} />
      <div className={'px-8 pb-6 leading-7'}>
        {data && data.Success && data.Traces.length > 0 && (
          <div className={'space-y-4 '}>
            {data.Traces.map((value) => (
              <div key={value.AcceptTime}>
                <Tag color={'success'}> {value.AcceptTime}</Tag>:
                {value.AcceptStation}
              </div>
            ))}
          </div>
        )}
        {data && data.Success && data.Reason && <Alert message={data.Reason} />}
      </div>
      {data && !data.Success && <Empty />}
    </div>
  );
};

export default memo(ExpressInfo);
